<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta charset="utf-8">
    <!-- Bootstrap -->
    <link href="../../vendors/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
    <!-- Font Awesome -->
    <link href="../../vendors/font-awesome/css/font-awesome.min.css" rel="stylesheet">
    <!-- NProgress -->
    <link href="../../vendors/nprogress/nprogress.css" rel="stylesheet">
    <!-- iCheck -->
    <link href="../../vendors/iCheck/skins/flat/green.css" rel="stylesheet">
    <!-- Custom Theme Style -->
    <link href="../../vendors/custom/custom.min.css" rel="stylesheet">
    <!--Bootstrap-table-->
    <link href="../../vendors/bootstrap-table/dist/bootstrap-table.css" rel="stylesheet">
    <!--自定义样式覆盖-->
    <style>
        body {
            background: #F7F7F7;
        }
    </style>
</head>
<body>

<div class="row">
    <!--页面表格-->
    <div class="col-md-12 col-sm-12 col-xs-12">
        <div class="x_panel">
            <div class="x_content">
                <table id="table" class="table table-striped jambo_table bulk_action"></table>
            </div>
        </div>
    </div>
</div>

<!--jQuery -->
<script src="../../vendors/jquery/dist/jquery.min.js"></script>
<!-- Bootstrap -->
<script src="../../vendors/bootstrap/dist/js/bootstrap.min.js"></script>
<!-- FastClick -->
<script src="../../vendors/fastclick/lib/fastclick.js"></script>
<!-- NProgress -->
<script src="../../vendors/nprogress/nprogress.js"></script>
<!-- iCheck -->
<script src="../../vendors/iCheck/icheck.min.js"></script>

<!--Bootstrap-table-->
<script src="../../vendors/bootstrap-table/dist/bootstrap-table.js"></script>
<script src="../../vendors/bootstrap-table/dist/locale/bootstrap-table-zh-CN.js"></script>

<!-- Custom Theme Scripts -->
<script src="../../vendors/custom/custom.min.js"></script>

<script type="text/javascript">

    const $table = $('#table');

    $(function () {
        var table = new tableInit();
        table.Init();
    });

    var tableInit = function () {
        var table = new Object()
        table.Init = function () {
            $('#table').bootstrapTable({
                url: '/pay/getOrder',
                method: 'get',                      //请求方式（*）
                striped: true,                      //是否显示行间隔色
                cache: false,                       //是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*）
                pagination: true,                   //是否显示分页（*）
                sortable: false,                     //是否启用排序
                sortOrder: "asc",                   //排序方式
                queryParams: queryParams,           //传递参数（*）
                sidePagination: "server",           //分页方式：客户端分页，server服务端分页（*）
                strictSearch: true,
                clickToSelect: true,                //是否启用点击选中行
                height: 550,                        //行高，如果没有设置height属性，表格自动根据记录条数觉得表格高度
                cardView: false,                    //是否显示详细视图
                detailView: false,                   //是否显示父子表
                showRefresh: true,                      //刷新
                search: true,                       // 搜索
                columns: [{
                    field: 'oid',
                    title: '订单编号',
                    align: 'center'
                }, {
                    field: 'uName',
                    title: '用户名',
                    align: 'center'
                }, {
                    field: 'stateString',
                    title: '订单状态',
                    align: 'center'
                }, {
                    field: 'address',
                    title: '收货地址',
                    align: 'center'
                }]
            });
        }
        return table;
    }

    //请求服务数据时所传参数
    function queryParams(params) {
        return 'pageSize=' + params.limit + '&' + 'pageIndex=' + (params.offset / params.limit + 1) + '&' + 'search=' + params.search;
    }

</script>
</body>

</html>

